<template>
  <a-card style="margin-bottom: 15px;">
    <div class="search-top">
      <div>
        <strong>类型：</strong>
        <span
          v-for="item in list"
          :key="item.id"
          :class="{active: item.id === payload.cate_id}"
          @click="change(item.id, 'cate_id')"
          class="cate-item"
        >{{item.name}}</span>
      </div>
      <div>
        <strong>是否使用：</strong>
        <a-button-group size="small">
          <a-button @click="change(0, 'unused')" :type="!payload.unused ? 'primary' : ''">全部</a-button>
          <a-button @click="change(1, 'unused')" :type="payload.unused ? 'primary' : ''">未使用</a-button>
        </a-button-group>
        <a-select @change="changeSort" style="margin-left: 20px;" :value="sortValue" size="small">
          <a-select-option :value="0">时间正序</a-select-option>
          <a-select-option :value="1">时间倒序</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="middle-flex select-box">
      <a-button
        style="margin-right: 15px;"
        :type="select.length === data.length ? 'primary' : ''"
        @click="$emit('selectAll')"
      >全选当前页</a-button>
      <a-button
        @click="$emit('mulAdd')"
        :disabled="!select.length"
        :class="{active: select.length}"
      >批量添加</a-button>
    </div>
  </a-card>
</template>

<script>
import * as Api from '@/api/goods'

const sortMap = [
  {
    field: 'created_at',
    order: 'asc'
  },
  {
    field: 'created_at',
    order: 'desc'
  }
]

export default {
  props: {
    payload: {
      type: Object,
      default: () => ({})
    },
    selectVisible: {
      type: Boolean,
      default: false
    },
    select: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [{ id: '', name: '全部' }],
      sortValue: 1,
    }
  },
  watch: {
    payload() {
      this.setActiveSort()
    }
  },
  mounted() {
    this.setActiveSort()
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const data = await Api.cate()
      this.list = [...this.list, ...data]
    },
    toChange(payload) {
      this.$emit('update:payload', payload)
      this.$emit('change', payload)
    },
    change(id, key) {
      const payload = { ...this.payload }
      payload[key] = id
      this.toChange(payload)
    },
    changeSort(e) {
      const fixPayload = sortMap[e] || {
        order_field: 'create_time',
        order_type: 'desc'
      }
      const payload = { ...this.payload }
      Object.assign(payload, fixPayload)
      this.toChange(payload)
    },
    setActiveSort() {
      const { field = '', order = '' } = this.payload
      const i = sortMap.findIndex(item => item.field === field && item.order === order)
      this.sortValue = i === -1 ? 1 : i
    },
    changeSelectVisible() {
      this.$emit('update:selectVisible', !this.selectVisible)
    }
  }
}
</script>

<style lang="less" scoped>
.cate-item {
  padding: 0.2em 0.4em;
  margin-right: 3px;
  cursor: pointer;
  border-radius: 2px;
  &.active {
    background: @primary-color;
    color: white;
  }
}
.search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.select-box {
  .cate-item {
    border: 1px solid #dbdbdb;
    color: #666;
    transition: 0.3s;
    margin-right: 10px;
    &:hover {
      opacity: 0.5;
      background: @primary-color;
      color: white;
      border-color: transparent;
    }
    &.active {
      opacity: 1;
      background: @primary-color;
      color: white;
      border-color: transparent;
    }
  }
}
</style>
